前端 Monorepo：Lerna 和 Nx 工作区管理

在不断发展的前端开发领域，管理大型和复杂的项目可能是一个重大挑战。传统的多个存储库设置虽然提供了隔离性，但可能会导致代码重复、依赖管理难题和不一致的工具。这就是 monorepo 架构大放异彩的地方。monorepo 是一个包含多个项目（通常是相关的）的单个存储库，这些项目一起构建和版本化。这种方法提供了许多优势，但有效管理 monorepo 需要专门的工具。本文探讨了两种流行的解决方案：Lerna 和 Nx。

什么是 Monorepo？

monorepo 是一种版本控制系统存储库，用于保存许多项目的代码。这些项目可以是相关的，也可以是完全独立的。关键在于它们共享同一个存储库。像 Google、Facebook、Microsoft 和 Uber 这样的公司已经成功地采用了 monorepo 来管理他们庞大的代码库。想想 Google 将几乎所有代码，包括 Android、Chrome 和 Gmail，都存储在单个存储库中。

Monorepo 的好处

• 代码共享和重用： 在项目之间轻松共享代码，无需复杂的打包和发布工作流程。想象一个设计系统库，可以无缝地集成到同一存储库中的多个应用程序中。
• 简化的依赖管理： 在一个地方管理依赖关系，确保所有项目之间的一致性。更新共享库的依赖关系会自动更新依赖于它的所有项目。
• 原子更改： 在单个提交中进行跨多个项目的更改，确保一致性并简化测试。例如，可以原子地完成影响前端和后端的重构。
• 改进的协作： 团队可以轻松地在同一存储库中的不同项目上进行协作，促进知识共享和跨职能开发。开发人员可以轻松浏览和理解来自不同团队的代码。
• 一致的工具和实践： 在所有项目中实施一致的编码标准、linting 规则和构建流程。这提高了代码质量和可维护性。
• 简化的重构： 大型重构项目得到了简化，因为所有相关代码都在同一个存储库中。自动化重构工具可以在整个代码库中使用。

Monorepo 的挑战

• 存储库大小： Monorepo 可能会变得非常大，可能会减慢克隆和索引操作的速度。像 `git sparse-checkout` 和 `partial clone` 这样的工具可以帮助缓解这个问题。
• 构建时间： 构建整个 monorepo 可能很耗时，尤其对于大型项目而言。像 Lerna 和 Nx 这样的工具提供了优化的构建流程来解决这个问题。
• 访问控制： 限制对 monorepo 特定部分的访问可能很复杂。需要仔细规划和实施访问控制机制。
• 工具复杂性： 设置和管理 monorepo 需要专门的工具和知识。最初的学习曲线可能很陡峭。

Lerna：在 Monorepo 中管理 JavaScript 项目

Lerna 是一种流行的工具，用于在 monorepo 中管理 JavaScript 项目。它优化了使用 Git 和 npm 管理多包存储库的工作流程。它特别适合使用 npm 或 Yarn 进行依赖管理的项目。

Lerna 的主要功能

• 版本管理： Lerna 可以根据自上次发布以来所做的更改自动对包进行版本控制和发布。它使用常规提交来确定下一个版本号。
• 依赖管理： Lerna 处理包间依赖关系，确保 monorepo 内的包可以相互依赖。它使用符号链接创建本地依赖关系。
• 任务执行： Lerna 可以并行执行多个包的命令，从而加快构建和测试过程。它支持运行在 `package.json` 中定义的脚本。
• 更改检测： Lerna 可以检测自上次发布以来哪些包已更改，从而允许有针对性的构建和部署。

Lerna 使用示例

让我们用一个简化的示例来说明 Lerna 的用法。假设我们有一个 monorepo，其中包含两个包：`package-a` 和 `package-b`。`package-b` 依赖于 `package-a`。

monorepo/
├── lerna.json
├── package.json
├── packages/
│   ├── package-a/
│   │   ├── package.json
│   │   └── index.js
│   └── package-b/
│       ├── package.json
│       └── index.js

1. 初始化 Lerna：

lerna init

这将创建 `lerna.json` 并更新根 `package.json`。`lerna.json` 文件配置 Lerna 的行为。

2. 安装依赖项：

npm install
# or
yarn install

这将安装 monorepo 中所有包的依赖项，基于每个包中的 `package.json` 文件。

3. 跨包运行命令：

lerna run test

这将执行在定义了它的所有包的 `package.json` 文件中定义的 `test` 脚本。

4. 发布包：

lerna publish

此命令分析提交历史记录，确定哪些包已更改，根据常规提交增加其版本，并将它们发布到 npm（或您选择的注册表）。

Lerna 配置

`lerna.json` 文件是 Lerna 配置的核心。它允许您自定义 Lerna 的行为，例如：

• `packages`：指定 monorepo 中包的位置。通常设置为 `["packages/*"]`。
• `version`：指定版本控制策略。可以是 `independent`（每个包都有自己的版本）或固定版本。
• `command`：允许您配置特定 Lerna 命令的选项，例如 `publish` 和 `run`。

示例 `lerna.json`：

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}

Nx：智能、快速且可扩展的构建系统

Nx 是一个强大的构建系统，为 monorepo 管理提供了高级功能。它侧重于增量构建、计算缓存和任务编排，以显着提高构建时间和开发人员的生产力。虽然 Lerna 主要侧重于管理包，但 Nx 提供了一种更全面的方法来管理整个 monorepo 工作流程，包括代码生成、linting、测试和部署。

Nx 的主要功能

• 增量构建： Nx 分析项目的依赖关系图，并且只重新构建自上次构建以来已更改的项目。这大大减少了构建时间。
• 计算缓存： Nx 缓存任务的结果，例如构建和测试，以便在输入未更改的情况下可以重用它们。这进一步加快了开发周期。
• 任务编排： Nx 提供了一个强大的任务编排系统，允许您定义复杂的构建管道并高效地执行它们。
• 代码生成： Nx 提供了代码生成工具，可以帮助您快速创建新项目、组件和模块，遵循最佳实践和一致的标准。
• 插件生态系统： Nx 拥有丰富的插件生态系统，支持各种技术和框架，例如 React、Angular、Node.js、NestJS 等。
• 依赖关系图可视化： Nx 可以可视化您的 monorepo 的依赖关系图，帮助您了解项目之间的关系并识别潜在问题。
• 受影响的命令： Nx 提供命令，仅在受特定更改影响的项目上运行任务。这允许您将精力集中在需要关注的领域。

Nx 使用示例

让我们用一个简化的示例来说明 Nx 的用法。我们将创建一个包含 React 应用程序和 Node.js 库的 monorepo。

1. 全局安装 Nx CLI：

npm install -g create-nx-workspace

2. 创建一个新的 Nx 工作区：

create-nx-workspace my-monorepo --preset=react
cd my-monorepo

这将创建一个新的 Nx 工作区，其中包含一个 React 应用程序。`--preset=react` 选项告诉 Nx 使用 React 特定的配置初始化工作区。

3. 生成一个库：

nx generate @nrwl/node:library my-library

这将生成一个名为 `my-library` 的新 Node.js 库。Nx 自动配置库及其依赖项。

4. 构建应用程序：

nx build my-app

这将构建 React 应用程序。Nx 分析依赖关系图，并且只重新构建必要的文件。

5. 运行测试：

nx test my-app

这将运行 React 应用程序的单元测试。Nx 缓存测试结果以加速后续测试运行。

6. 查看依赖关系图：

nx graph

这将打开一个 Web 界面，可视化 monorepo 的依赖关系图。

Nx 配置

Nx 通过位于工作区根目录的 `nx.json` 文件进行配置。此文件定义了工作区中的项目、它们的依赖关系以及可以在其上执行的任务。

`nx.json` 中的关键配置选项包括：

• `projects`：定义工作区中的项目及其配置，例如它们的根目录和构建目标。
• `tasksRunnerOptions`：配置任务运行器，负责执行任务并缓存其结果。
• `affected`：配置 Nx 如何确定哪些项目受到更改的影响。

示例 `nx.json`：

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "...",
        "canTrackAnalytics": false,
        "showUsageWarnings": false
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "default"],
      "outputs": ["{projectRoot}/dist"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**/*", "!{projectRoot}/tmp/**/*"],
    "production": ["!{projectRoot}/**/*.spec.ts", "!{projectRoot}/**/*.spec.tsx", "!{projectRoot}/**/*.spec.js", "!{projectRoot}/**/*.spec.jsx"]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "library": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "component": {
        "style": "css"
      }
    },
  }
}

Lerna vs. Nx：选择哪一个？

Lerna 和 Nx 都是用于管理前端 monorepo 的优秀工具，但它们迎合了略有不同的需求。以下是一个比较，可帮助您为您的项目选择正确的工具：

功能	Lerna	Nx
重点	包管理	构建系统和任务编排
增量构建	有限（需要外部工具）	内置且高度优化
计算缓存	否	是
代码生成	否	是
插件生态系统	有限	广泛
学习曲线	较低	较高
复杂性	更简单	更复杂
用例	主要侧重于管理和发布 npm 包的项目。	需要优化构建时间、代码生成和全面构建系统的大型和复杂项目。

如果满足以下条件，请选择 Lerna：

• 您主要需要管理和发布 npm 包。
• 您的项目相对较小到中等规模。
• 您更喜欢一个更简单的工具，学习曲线较低。
• 您已经熟悉 npm 和 Yarn。

如果满足以下条件，请选择 Nx：

• 您需要优化的构建时间和增量构建。
• 您需要代码生成功能。
• 您需要一个具有任务编排的全面构建系统。
• 您的项目很大且复杂。
• 您愿意投入时间学习一个更强大的工具。

您可以将 Lerna 与 Nx 一起使用吗？

是的，Lerna 和 Nx 可以一起使用。这种组合允许您利用 Lerna 的包管理功能，同时受益于 Nx 的优化构建系统和任务编排。Nx 可以配置为 Lerna 的任务运行器，为 Lerna 管理的包提供增量构建和计算缓存。

前端 Monorepo 管理的最佳实践

无论您选择 Lerna 还是 Nx，遵循最佳实践对于成功管理前端 monorepo 至关重要：

• 建立清晰的项目结构： 逻辑且一致地组织您的项目。使用清晰的包和库命名约定。
• 实施一致的编码标准： 使用 linters 和格式化程序来确保所有项目之间的一致代码风格。可以将 ESLint 和 Prettier 等工具集成到您的工作流程中。
• 自动化构建和测试流程： 使用 CI/CD 管道来自动化构建、测试和部署流程。可以使用 Jenkins、CircleCI 和 GitHub Actions 等工具。
• 实施代码审查： 进行彻底的代码审查，以确保代码质量和可维护性。使用拉取请求和代码审查工具。
• 监控构建时间和性能： 跟踪构建时间和性能指标，以识别瓶颈和需要改进的领域。Nx 提供了用于分析构建性能的工具。
• 记录您的 Monorepo 结构和流程： 创建清晰的文档，解释您的 monorepo 的结构、使用的工具和技术以及开发工作流程。
• 采用常规提交： 使用常规提交来自动化版本控制和发布流程。Lerna 开箱即用地支持常规提交。

结论

前端 monorepo 为管理大型和复杂项目提供了显着的优势，包括代码共享、简化的依赖管理和改进的协作。Lerna 和 Nx 是可以帮助您有效管理前端 monorepo 的强大工具。Lerna 是管理 npm 包的绝佳选择，而 Nx 提供了更全面的构建系统，具有增量构建和代码生成等高级功能。通过仔细考虑您的项目需求并遵循最佳实践，您可以成功采用前端 monorepo 并获得其好处。

请记住，在 Lerna 和 Nx 之间进行选择时，请考虑团队的经验、项目复杂性和性能要求等因素。尝试这两种工具，并找到最适合您特定需求的工具。

祝您 Monorepo 之旅一切顺利！